import React,{useEffect,useState} from 'react'
import './index.scss'
import { useNavigate } from 'react-router-dom'
import {_getTopList,_getPlayListDetail} from '../../api/recommend'
import { Flex } from 'react-vant'
export default function AllTopList() {
    const navigate = useNavigate()
    const [topList,setTopList] = useState([])
    useEffect(()=>{
        _getTopList().then(res=>{
            setTopList(res.list)
        })
    },[])
    function goSongListDetails(id){
        navigate('/songlistdetails?id='+id)
    }
    var imgWidth=parseInt(window.innerWidth/3.7 )   
    return (
        <div className='all_top_list'>
            { topList.map((item,index)=>{
            return (
                item.tracks[0]?(<div className='all_top_list_main' key={index} onClick={()=>goSongListDetails(item.id)}>
                    <Flex align='center' justify='between' className='all_top_list_main_top'>
                        <div>{item.name}</div>
                        <div>{item.updateFrequency}</div>
                    </Flex>
                    <Flex align='center' className='all_top_list_main_center'>
                       <img src={item.coverImgUrl+'?param=80y80'}/>
                        <div>
                            {item.tracks.map((itm,idx)=>{
                                return(<div className='songname'  key={idx} 
                                    style={{width:window.innerWidth-180+'px'}}>
                                        <span>{idx+1}</span>
                                        <span>{itm.first}</span>
                                        <span>-</span>
                                        <span>{itm.second}</span>
                                    </div>)
                            })}
                        </div>
                    </Flex>
                </div>):(
                <div className='all_top_list_mainspecial' key={index} onClick={()=>goSongListDetails(item.id)} style={{width:imgWidth+'px',height:imgWidth+'px'}}>
                    <img src={item.coverImgUrl+'?param='+imgWidth+'y'+imgWidth}/>
                    <div className='word'>
                        <div>{item.updateFrequency}</div>
                    </div>
                   
                </div>))
            })}
        </div>
    )
}
